<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../component/layui/css/layui.css"/>
    <link href="../../admin/css/font/dtreefont.css" rel="stylesheet"/>
    <link href="../../admin/css/dtree.css" rel="stylesheet"/>
    <link href="../../admin/css/pearCommon.css" rel="stylesheet"/>
    <style>
        body{
            margin: 20px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="javascript:void(0);">
    <div  class="mainBox">
    <div class="layui-row" style="margin: 15px;">

        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12 layui-hide">
            <div class="layui-form-item">
                <label class="layui-form-label">权限编号</label>
                <div class="layui-input-block">
                    <input type="text" name="id" th:value="${sysPower.id}" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-form-item">
                <label  class="layui-form-label">目录</label>
                <div class="layui-input-block">
                    <ul id="selectParent" class="dtree" th:attr="data-value=${sysPower.parentId}" data-id="-1" ></ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" th:value="${sysPower.name}" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12" id="codeItem">
            <div class="layui-form-item">
                <label class="layui-form-label">标识</label>
                <div class="layui-input-block">
                    <input type="text" name="code" id="code" th:value="${sysPower.code}"  placeholder=" 例如: system : user : add" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input  lay-filter="type" type="radio" name="type" th:checked="${sysPower.type eq '0'}" value="0" title="目录">
                    <input  lay-filter="type" type="radio" name="type" th:checked="${sysPower.type eq '1'}" value="1" title="菜单">
                    <input  lay-filter="type" type="radio" name="type" th:checked="${sysPower.type eq '2'}" value="2" title="按钮">
                </div>
            </div>
        </div>


        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12" id="urlItem">
            <div class="layui-form-item">
                <label class="layui-form-label">接口</label>
                <div class="layui-input-block">
                    <input type="text" id="url" name="url" th:value="${sysPower.url}"   placeholder=" 例如: / system / user / add" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12" id="urlItem">
        <div class="layui-form-item">
            <label for="" class="layui-form-label">图标</label>
            <div class="layui-input-block">
                <input type="text" id="iconPicker" th:value="${sysPower.icon}" lay-filter="iconPicker" name="icon" class="layui-input">
            </div>
        </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="text" name="sort" required  lay-verify="required" th:value="${sysPower.sort}" placeholder="0" autocomplete="off" value="0" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" th:value="${sysPower.description}"  class="layui-textarea"></textarea>
            </div>
        </div>
        </div>
    </div>



    </div>

    </div>
    <div class="bottom">
        <div class="button-container">
            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="../../component/layui/layui.js"></script>
<script th:inline="javascript">
    //Demo
    layui.use(['iconPicker','form','layer','jquery','operate','dtree'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var operate = layui.operate;
        var dtree = layui.dtree;
        var iconPicker = layui.iconPicker;

        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            }
        });


        iconPicker.checkIcon('iconPicker', [[${sysPower.icon}]]);

        dtree.renderSelect({
            elem: "#selectParent",
            url: "/system/power/tree",
            method:'get',
            selectInputName: {nodeId: "parentId", context: "name"},
            skin: "layui",
            dataStyle: "layuiStyle",
            dataFormat: "list",
            response:{message:"msg",statusCode:0, treeId: "id", parentId: "parentId", title: "name"},  //修改response中返回数据的定义
            selectInitVal: [[${sysPower.parentId}]],
            done: function(res, $ul, first){
                if(first) {
                    dtree.dataInit("selectParent",[[${sysPower.parentId}]]);
                    // 也可以在这里指定，第二个参数如果不填，则会自动返显当前选中的数据
                    dtree.selectVal("selectParent",[[${sysPower.parentId}]]);
                }

            }
        });

        function init(type){
            if (type == '0') {
                $("#urlItem").hide();
                $("#codeItem").hide();
                $("#url").val("");
                $("#code").val("");
            } else if (type == '1') {
                $("#urlItem").show();
                $("#codeItem").show();
            } else if (type == '2'){
                $("#urlItem").hide();
                $("#codeItem").show();
                $("#url").val("");
            }
        }

        form.on("radio(type)", function (data) {
            init(this.value);
        });

        init([[${sysPower.type}]])

        //监听提交
        form.on('submit(formDemo)', function(data){

            var loading =  layer.load();

            $.ajax({
                url:'/system/power/update',
                type:'put',
                dataType:'json',
                data:JSON.stringify(data.field),
                contentType: 'application/json; charset=UTF-8',
                success:function(result){

                    layer.close(loading);

                    if(result.code==200){
                        layer.msg(result.msg,{icon:1,time:1000},function(){

                            parent.refresh();
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);

                        });
                    }else{
                        layer.msg(result.msg,{icon:2,time:1000});
                    }
                }
            });

        });
    });
</script>
</body>
</html>